<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Hopping Radio Button MI</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<form>
<input id="a" type="radio" name="hopping" value="a" checked>
<label for="a"><span></span>A</label>
<input id="b" type="radio" name="hopping" value="b">
<label for="b"><span></span>B</label>
<input id="c" type="radio" name="hopping" value="c">
<label for="c"><span></span>C</label>
<div class="worm">
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
<div class="worm__segment"></div>
</div>
</form>
</body>
</html>